九陰真經招式千變萬化，但開宗明義第一句便是「九陰盛極，乃是災害」。這句話點出了修煉這門絕世武功的核心奧義：必須陰陽並進，剛柔並濟，否則極陰之氣反噬，輕則走火入魔，重則萬劫不復。這個道理，也適用於我們使用 AI 撰寫測試案例或是程式碼，AI 能夠幫助我們快速地產生測試案例、撰寫測試程式碼，幫助我們快速完成任務，但如果我們只是一昧的依賴 AI，卻沒有去理解背後的原理，就像只修煉「陰」，而忽略了「陽」的平衡。

招式演練：Copilot 的兩大心法

在 VS Code 的 Agent mode 有兩種進階的使用方法。.prompt和 .chatmode兩種模式，我們可以把 prompt 當作在 chat 模式的記憶模式，告訴 AI Agent 需要遵守什麼樣子的規則、或是輸入輸出的格式。這個類似提醒事項，告訴 AI 先閱讀這些提醒事項後，才接續執行你告訴或要求他的動作。

而 .chatmode則是讓你定義 Copilot 的角色或工作模式，當你需要 AI Agent 變成一個撰寫測試程式碼的專家、或是能夠理解 Code Review 的資深工程師，都可以使用 .chatmode定義其規則，讓 AI 能夠更有效地處理其角色相關的任務。

.prompt：見招拆招的「密訣」

1. 打開 Command Palette，按下 Ctrl + Shift + P（Windows / Linux）或 Command + Shift + P（macOS） ，在輸入框輸入關鍵字 New Prompt File，系統會指定儲存 .prompt 檔案的資料夾，預設可以放在 .github/prompt或其他資料夾。
2. 輸入檔案名稱，需要選擇 mode，選擇 agent 即可。

---
mode: agent
---
Define the task to achieve, including specific requirements, constraints, and success criteria.

.chatmode：變化無窮的「角色轉換」

1. 與上述步驟一樣，將關鍵字改成 Chat: New Mode File ...，並且指定資料夾 .github/chatmodes，即可建立 chatmode。

---
description: 'Description of the custom chat mode.'
tools: ['playwright']
---
Define the purpose of this chat mode and how AI should behave: response style, available tools, focus areas, and any mode-specific instructions or constraints.

秘笈傳授：撰寫建立測試案例提示語和角色

建議專案目錄（最小可行）：

.
├─ .github/
│  ├─ chatmodes
│  │  └─ playwright-writer.chatmode.md
│  └─ prompts
│     └─ playwright-generate-test.prompt.md
├─ tests/                    # 撰寫 test case
│  └─ e2e/login.spec.ts
├─ test-modules/             # Copilot 輸出的模組檔案放這裡
│  ├─ auth/
│  │  ├─ auth.module.ts      ← Copilot 幫忙產生
│  │  └─ auth.types.ts       ← Copilot 幫忙產生型別
│  ├─ cart/
│  └─ utils/
├─ fixtures/                 # 共用 fixture
│  └─ app.fixtures.ts
├─ data/                     # 測試資料與 factory
│  └─ users.factory.ts
└─ playwright.config.ts

撰寫 playwright-generate-tests.prompt.md，根據 AAA 和 Given-When-Then 結構撰寫出測試案例。

---
mode: agent
---

# 根據 AAA 產生測試案例

你將會收到一個情境（Scenario），並需要依照 AAA（Arrange-Act-Assert） 架構來產生對應的 Playwright 測試案例。
- 如果使用者沒有提供情境，請先要求他提供一個。
- 不要在完成所有既定步驟前，就過早產生測試程式碼，也不要僅根據情境直接輸出程式碼。
- 請依序執行下列流程，並透過 Playwright MCP 提供的工具逐步完成：
	1. Arrange（準備）：建立測試環境、初始化資料或物件。
	2. Act（執行）：執行測試情境中描述的操作。
	3. Assert（斷言）：驗證操作後的結果是否符合預期。
- 僅在完成上述步驟後，再依照訊息歷史紀錄，產生一個基於 @playwright/test 的 TypeScript 測試案例。
- 將產生的測試檔案存放在 tests 目錄中。
- 執行該測試檔案，並持續修正，直到測試通過為止。

撰寫 playwright-writer.chatmode.md，撰寫負責撰寫 Playwright 測試案例的角色。

---
description: ‘Playwright Writer — 以「可執行、可維護、可擴充」為目標，撰寫 Playwright 測試。’
tools: [''playwright']
---

角色與目的

你是「Playwright Writer」。你的任務是把自然語言需求轉為高品質的 Playwright 測試案例，並且遵循下列的原則：
1. 使用 AAA 撰寫自動化測試案例
2. 使用 Given/When/Then 描述測試情境

最佳實踐

通常 .prompt 和 .chatmode 都需要根據實際情況調整，隨著鐵人賽一天天的進行，根據我們了解更多的心法與招式，我們會補充需要的提示詞與角色，如果需要參考的話，可以到 GitHub 尋找適合的提示詞和角色。

收功：今日總結

• 今天我們了解到在使用 AI Agent 執行任務的時候，有時，還是會需要了解原理，不然我們可能會變得一知半解。雖然能順利完成任務，但卻無法真正掌握核心技術，也無法處理那些 AI 無法解決的複雜問題。
• 學習如何建立 .prompt 和 .chatmode 模式，並且在 Chat 使用這些提示詞與角色，完成撰寫程式碼的任務。